<template>
	<view class="page">
		<u-card :show-head="false" padding="10" :border="false" margin="20rpx 0" border-radius="0"
			:foot-border-top="false" v-for="(item,index) in list" :key="index">
			<view class="" slot="body">
				<view class="u-body-item">
					<view class="item">
						<view class="title">船公司:</view>
						<view class="info">{{item.shippingCompany}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">海运费:</view>
						<view class="info">{{item.shippingFee}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">港杂费:</view>
						<view class="info">{{item.portCharges}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">船期_ETD:</view>
						<view class="info">{{item.shippingDateETD}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">船期_ETA:</view>
						<view class="info">{{item.scheduleEta}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">起运港(箱使/天):</view>
						<view class="info">{{item.departurePortBoxAngel}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">目的港(箱使/天):</view>
						<view class="info">{{item.destinationPortBoxAngel}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">是否直达:</view>
						<view class="info">{{item.isItDirect}}</view>
					</view>
				</view>
			</view>
			<view class="u-footer" slot="foot">
				<!-- <u-button type="primary" :custom-style="customStyle" plain size="medium" @click="view(item.id)">历史议价
				</u-button> -->
				<u-button type="primary" :custom-style="customStyle" plain size="medium" @click="edit(item.id)">修改报价
				</u-button>
			</view>
		</u-card>
		<view class="u-empty">
			<u-empty v-if="list.length==0" text="暂无报价"></u-empty>
		</view>
		<u-toast ref="uToast" />
		<h-footer v-if="showAddButton" :custom-style="{padding:'0 80rpx'}" :btns="[{text:'新增'}]" @btnClick="add">
		</h-footer>
	</view>
</template>

<script>
	import hFooter from "../../components/h-footer.vue"
	export default {
		data() {
			return {
				list: [],
				id: '',
				detailId: '',
				customStyle: {
					marginLeft: '10rpx',
					marginTop: '10rpx'
				},
				maxNum: 0, //最大船公司数

			}
		},
		components: {
			hFooter
		},
		computed: {
			showAddButton() {
				return this.list.length < this.maxNum
			}
		},
		onLoad(option) {
			this.id = option.id
			this.detailId = option.detailId
		},
		onShow() {
			this.list = []
			this.maxNum = 0
			this.getList()
		},
		methods: {
			//获取数据列表
			getList() {
				this.$u.api.carrier.getPriceDetailList({
					id: this.id
				}).then(data => {
					if (data.code === 200 && data.success) {
						this.list = data.data
					}
				}).catch(() => {

				})
				this.$u.api.carrier.getMaximumNumberOfShipping().then(data => {
					if (data.code === 200 && data.success) {
						this.maxNum = data.data
					}
				}).catch(() => {

				})
			},
			//修改报价
			edit(id) {
				uni.navigateTo({
					url: `./quoted?id=${this.detailId}&type=edit&workflowId=3&foreignTradeId=${id}`
				})
			},
			//新增
			add(btn, index, done) {
				done()
				uni.navigateTo({
					url: `./quoted?id=${this.detailId}&type=add&workflowId=3`
				})
			},
		}
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		width: 750rpx;
		background-color: #f9f9f9;

		.u-body-item {
			font-size: 28rpx;
			color: #999999;
			width: 100%;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.title {
					width: 200rpx;
				}

				.info {
					width: 425rpx;
					color: #333333;
					word-break: break-all;
				}
			}
		}

		.u-footer {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;

			button {
				padding: 0 40rpx;
			}
		}

		.editBtn {
			display: flex;
		}

		.u-empty {
			width: 100%;
			position: absolute;
			top: 50%;
		}
	}
</style>
